<template>
	<view class="apps">
		<uv-loading-icon :vertical="true" :show="loadShow" :text="loadText"></uv-loading-icon>
		<view class="flex fdc" v-if="loadShow==false">
			<view class="flex fdc aic bgb ptb20">
				<view class="flex jcc engine fdc aic" >
					<view class="marker" v-for="(item,index) in 60" :key='index' :style="`transform:rotate(`+ ( index * 6) + `deg) translate(0px,-140px)`"></view>
					<l-circle :percent="timers" :max="3600" strokeColor="#ffffff"  trailColor="#15347f" size="250px"></l-circle>
					<view class="flex jcc info fdc aic">
						<image src="https://mp.lifecloud.top/static/images/engine.jpg"></image>
						<view class="f22 bgwhite br4 mtb10 ptb10 plr20">{{ engine.name }}</view>
						<view class="f28">{{formatTimer}}</view>
					</view>
				</view>
				<view class="flex mt20 fdc aic">
					<uv-button size="large" type="primary" text="启动洗车设备" @click="handelxc" v-if="start == false"></uv-button>
					<uv-button size="large" type="warning" text="紧急停止设备" @click="handelend" v-if=" start "></uv-button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import { util } from '/common/util.js';
	import { getCurrentInstance , ref , reactive,nextTick,onUnmounted,computed } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance();
	const { $onLaunched } = proxy;
	const loadText = ref('正在连接设备,请稍后');
	const loadShow = ref(true);
	const engine = ref({
		id:0
	});
	const start =ref(false)
	const user = ref(null);
	const timers = ref(0);
	const interId = ref(null);
	const startTimer = ()=>{
		interId.value = setInterval(()=>{
			timers.value++
			if(timers.value >= 3600){
				timers.value =3600;
			}
		},1000);
	}
	const stopTimer = () =>{
		clearInterval(interId.value)
	}
	const getEngine= (e)=>{
		const verify = e.split('?');
		console.log(verify);
		if(verify[0] != 'https://mp.lifecloud.top/mpengine'){
			loadText.value = '获取设备参数无效';
			util.alert('参数无效');
			return
		}
		const param = verify[1].split('=');
		console.log(param);
		if(param[0] != "e"){
			loadText.value = '获取设备参数无效';
			util.alert('参数无效');
			return
		}
		util.request({url:'/mpuser/engine',data:{name:param[1]}}).then((res)=>{
			if(res.code == 1){
				loadShow.value =false;
				engine.value =res.data;
			}else{
				loadShow.value =true;
				loadText.value = '获取设备参数无效';
				util.alert('参数无效');
				
			}
		})
	}
	const handelend = async ()=>{
		const data = await util.request({url:'/mpuser/engineend',data:engine.value,load:1});
		if(data.code == 200){
			timers.value=0;
			start.value = false
			stopTimer();
		}
	}
	const handelxc = async ()=>{
		if(util.isLogin() == false){
			util.alert('请先登录');
			setTimeout(function(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},1000);
			return ;
		}
		const data = await util.request({url:'/mpuser/enginestart',data:engine.value,load:1});
		if(data.code == 51){
			util.alert('设备不在线，请稍后重试');
		}
		if(data.code == 101){
			util.alert('余额不足，请先充值');
			setTimeout(function(){
				uni.navigateTo({
					url:'/pages/shop/shop'
				})
			},1000);
			return ;
		}
		if(data.code == 200){
			start.value = true
			startTimer();
		}
		
	}
	const formatTimer = computed({
		get(){	
			if( timers.value /60 <= 0 ){
				return '00:00:'+(timers.value<10?'0'+timers.value:String(timers.value));
			}
			if ( timers.value/3600 < 0){
				const tI = timers.value%60;
				const sI = parseInt(timers.value/60);
				const t = tI < 10 ?'0'+tI: String(tI)
				const s = sI < 10 ?'0'+sI:String(sI)
				return '00:'+s+':'+t;
			}
			if ( timers.value/3600 > 0){
				const tI = timers.value%60;
				const yI = parseInt(timers.value/60);
				const sI = yI%60;
				const hI = parseInt(yI/60);
				const t = tI < 10 ?'0'+tI: String(tI)
				const s = sI < 10 ?'0'+sI:String(sI)
				const h = hI < 10 ? '0'+hI:String(hI)
				return h+':'+s+':'+t;
			}
		}
	})
	
	onLoad(async (option)=>{
		await $onLaunched;
		const q = decodeURIComponent(option.q)
		getEngine(q);
		
	});
	
	onShow(()=>{
		
	})
	onUnmounted(()=>{
		stopTimer()
	})
</script>

<style scoped>
.bgb{background-color: #badafb;}
.engine{background-color: #3c9cff; width:300px;height: 300px; border-radius: 50%; position: relative;}
.engine .marker{position:absolute;width:2px; height:8px; background-color: #fff;left:148px;top:146px;}
.engine .info{position:absolute; width:224px;height:224px; border-radius:50%;left:38px;top:38px; color:#15347f}
.engine .info image{width:50px;height:50px;border-radius:50%; border:5px solid #fff;}
</style>
